html {
  transform: matrix(1, 0, 0, -1, 0, 0)!important;
  -webkit-transform: matrix(1, 0, 0, -1, 0, 0)!important;
}
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: '微软雅黑', sans-serif;
  background: #000;
  color: #fff;
}

.wrapper {
  position: relative;
  width: 24rem;
  height: 24rem;
  margin-left: -12rem;
  margin-top: -17rem;
  position: absolute;
  left: 50%;
  top: 50%;
  background-size: 100%!important;
  background-repeat: no-repeat;
  background-position: center;
}


.wrapper .pic {
  position: absolute;
  max-width: 150%;
  max-height: 150%;
  border: 0;
  outline: none;
  left: 50%;
  top: 50%;
  display: none;
}

.box {
  font-size: 2.4rem;
  position: absolute;
  height: 4rem;
  text-align: center;
  vertical-align: middle;
  line-height: 4rem;
  text-shadow: -4px 0px 4px rgba(255,255,255,.7);
  transform-origin: 50% 50%;
}

.box .text {
  text-align: center;
  transform-origin: 50% 50%;
}

/* mirror-all-show */
.wrapper-all-show .box-up {
  transform: rotate(-180deg);
  color: #ffff08;
  left: -6rem;
  top: -12rem;
}
.wrapper-all-show .box-up .text {
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.wrapper-all-show .box-down {
  transform: matrix(-1, 0, 0, 1, 0, 0);
  left: 6rem;
  bottom: -6rem;
}

.wrapper-all-show .box-left {
  transform: rotate(90deg);
      left: -14rem;
    top: 7rem;
}
.wrapper-all-show .box-left .text {
  color: rebeccapurple;
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.wrapper-all-show .box-right {
  transform: rotate(-90deg);
  right: -7rem;
  top: -5rem;
}
.wrapper-all-show .box-right .text {
  color: blue;
  transform: matrix(-1, 0, 0, 1, 0, 0);
}


/* wrapper-mirror */
.wrapper-mirror .box-up {
  left: 50%;
  transform: rotate(-180deg);
  color: #fff;
}
.wrapper-mirror .box-up .text {
  /*transform: matrix(-1, 0, 0, 1, 0, 0);*/
}

.wrapper-mirror .box-down {
  bottom: 0;
  left: 50%;
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.wrapper-mirror .box-left {
  color: transparent;
  text-shadow: none;
  transform: rotate(90deg);
  background: #ccc;
  width: 0.2rem;
  top: 50%;
  margin-top: -2rem;
}
.wrapper-mirror .box-left .text {
  color: transparent;
  text-shadow: none;
}

.wrapper-mirror .box-right {
  color: transparent;
  text-shadow: none;
  transform: rotate(-90deg);
  background: #ccc;
  width: 0.2rem;
  top: 50%;
  right: 0;
  margin-top: -2rem;
}
.wrapper-mirror .box-right .text {
  color: transparent;
  text-shadow: none;
}

/* mirror-180 */
.wrapper-mirror-180 .box {

}

/* video */
#my-video {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
}

/*@media screen and (min-width: 766px)  {
  .wrapper {
    width: 35rem;
    height: 35rem;
  }
  .text {
    font-size: 4rem;
  }
}*/

.sensors {
  position: absolute;
  right: 2rem;
  top: 2rem;
  font-size: 1.2rem;
  color: #fff;
}


.light {
  position: absolute;
  z-index: 1000;
  width: 40rem;
  left: 50%;
  margin-left: -20rem;
  text-align: center;
}
.mask {
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
  transition: all ease .6s;
}

.light img {
  max-width: 100%;
  max-height: 100%;
}

.ball {
  display: none;
  width: 40rem;
  height: 40rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20rem;
  margin-top: -20rem;
}